<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2022-12-08 23:34:52
-->
<template>
    <div class="singer">
        <div class="top">
            <TagsBar :taglist="areaTags" @tagBarClick="areaClick"></TagsBar>
            <TagsBar :taglist="typeTags" @tagBarClick="typeClick"></TagsBar>
            <TagsBar :taglist="initialTags" @tagBarClick="initialClick"></TagsBar>
        </div>
        <!-- 歌手列表 -->
        <div class="main">
            <div class="main-ul">
                <div class="main-item" v-for="(item, index) in singerlist" :key="item.id">
                    <Singerlist :singerlist="item"></Singerlist>
                </div>
            </div>
        </div>

        <div class="pagination" v-if="singerlist.length !== 0">
            <el-pagination small background layout="prev, pager, next" :total="total" v-model:page-size="limit"
                v-model:current-page="currentPage"   @current-change="handleCurrentChange"/>
        </div>
    </div>
</template>

<script setup>
import { getSingersList } from '@/api/findmusic/singer/singer'
import TagsBar from '@/components/TagsBar.vue'
import Singerlist from '@/components/content/singerlist/Singerlist.vue'
import { ref, onMounted } from "vue";
//分类标签
const areaTags = ref({
    category: '语种',
    list: [
        { area: -1, name: '全部' },
        { area: 7, name: '华语' },
        { area: 96, name: '欧美' },
        { area: 8, name: '日本' },
        { area: 16, name: '韩国' },
        { area: 0, name: '其他' }
    ]
})
const typeTags = ref({
    category: '分类',
    list: [
        { type: -1, name: '全部' },
        { type: 1, name: '男歌手' },
        { type: 2, name: '女歌手' },
        { type: 3, name: '乐队组合' },
    ]
})
const initialTags = ref({
    category: '筛选',
    list: [
        { initial: -1, name: '热门' },
        { initial: 'a', name: 'A' },
        { initial: 'b', name: 'B' },
        { initial: 'c', name: 'C' },
        { initial: 'd', name: 'D' },
        { initial: 'e', name: 'E' },
        { initial: 'f', name: 'F' },
        { initial: 'g', name: 'G' },
        { initial: 'h', name: 'H' },
        { initial: 'i', name: 'I' },
        { initial: 'j', name: 'J' },
        { initial: 'k', name: 'K' },
        { initial: 'l', name: 'L' },
        { initial: 'm', name: 'M' },
        { initial: 'n', name: 'N' },
        { initial: 'o', name: 'O' },
        { initial: 'p', name: 'P' },
        { initial: 'q', name: 'Q' },
        { initial: 'r', name: 'R' },
        { initial: 's', name: 'S' },
        { initial: 't', name: 'T' },
        { initial: 'u', name: 'U' },
        { initial: 'v', name: 'V' },
        { initial: 'w', name: 'W' },
        { initial: 'x', name: 'X' },
        { initial: 'y', name: 'Y' },
        { initial: 'z', name: 'Z' },
        { initial: 0, name: '#' },

    ]
})
//默认是全部和热门
let area = ref(-1)
let type = ref(-1)
let initial = ref(-1)
let singerlist = ref([])
//每页展示个数
let limit = ref(48)
//歌手总数
let total = ref(960)
//当前页
let currentPage = ref(1)

//处理语种
function areaClick(item) {
    //修改语种| 地区
    area.value = item.area
    currentPage.value = 1
    getSingers(area.value, type.value, initial.value, 1)
}
//处理分类
function typeClick(item) {
    type.value = item.type
    currentPage.value = 1
    getSingers(area.value, type.value, initial.value, 1)
}
//处理筛选
function initialClick(item) {
    initial.value = item.initial
    currentPage.value = 1
    getSingers(area.value, type.value, initial.value, 1)
}
//当页码改变时
function handleCurrentChange(pages) {
    //修改当前页码
    currentPage.value = pages
    //再次获取歌手数据
    getSingers(area.value, type.value, initial.value,pages)
    //滚动到顶部
    window.scroll(0,0)
}

//获取服务器中的歌手列表
async function getSingers(area, type, initial, page) {
    let offset = (page - 1) * 48
    let res = await getSingersList(offset, initial, type, area)
    if (res.status === 200) {
        singerlist.value = res.data.artists
    }
}

//获取默认歌手数据
onMounted(() => {
    getSingers(area.value, type.value, initial.value, 1)
})


</script>

<style lang="scss" scoped>
.singer {
    .main {
        margin-top: 20px;

        .main-ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .main-item {
                cursor: pointer;
                margin-top: 10px;
                height: 200px;
                width: 170px;
                margin-bottom: 5px;
                position: relative;
                margin-right: 10px;
            }
        }
    }
}

.pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
</style>
